<template>
    <view class="body-view">
        <scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
            <block v-for="(menuTab,index) in menuTabs" :key="index">
                <view class="menu-one-view" :id="'tabNum'+index" @click="swichMenu(index)">
                    <view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
                        <view class="menu-one-txt">{{menuTab.name}}</view>
                        <view class="menu-one-bottom">
                            <view class="menu-one-bottom-color"></view>
                        </view>
                    </view>
                </view>
            </block>
        </scroll-view>
        <swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
            <block v-for="(swiperDate,index) in swiperDateList" :key="index">
                <swiper-item>
                    <scroll-view class="swiper-list-entity" lower-threshold=0 upper-threshold=-50 scroll-y @scrolltolower="loadMore(index)" @scrolltoupper="refresh(index)" >
                    <!--<view class="swiper-list-entity">-->
                        <block v-for="(item, itemIndex) in swiperDate.data" :key="itemIndex">
<!--                            <slot :name="'listItem' + itemIndex" :data="item" :index="itemIndex">
                                <text :slot="'listItem' + itemIndex" style="width: 100%; height: 100upx; line-height: 100upx; color: #1a1a1a; background-color: #ffffff; display: block;">1111111{{item}}</text>
                            </slot>-->
                            <view style="border-bottom: 1upx #e5e5e5 solid;">
                                <trade-item :data="item" :params="params" :priceparams="priceparams" :optionParam="optionParam" :hideQuote=true
                                            :qouteButton=false :differClass="diffeClass" :contentClass="contentClass" :hideInfo=true></trade-item>
                                <view-price-info v-if="item.status === 1" slot="bottomSlot" :data="item" :params="bottomparams"
                                                 :contentClass="bottomContentClass" @close="clickClose">
                                </view-price-info>
                            </view>
                        </block>
                        <view class="no-result" v-if="noData">
                            <image src="../../static/ibs/img_home_empty.png"  mode="aspectFill"/>
                            <text>暂无求购</text>
                        </view>
                        <view class="uni-tab-bar-loading">
                            <uni-load-more :loadingType="swiperDate.loadingType" :contentText="loadingText"></uni-load-more>
                        </view>
                    <!--</view>-->
                    </scroll-view>
                </swiper-item>
            </block>
        </swiper>
    </view>

</template>

<script type="text/ecmascript-6">
    import tradeItem from '@/components/ibs/tradeItem.vue';
    import uniLoadMore from '@/components/uni-load-more.vue';
    import  ViewPriceInfo from '@/components/ibs/viewPriceInfo.vue';
    import api from '@/common/api.js';   //请求API方法
    export default {
        components: {
            tradeItem,
            uniLoadMore,
            ViewPriceInfo
        },
        props: {
            data: Object,
            params: Array,
            priceparams: Array,
            optionParam: Array,
            bottomparams: Array
        },
        data() {
            return {
                scrollLeft: 0,
                loadingText: {
                    contentdown: "",
                    contentrefresh: "正在加载...",
                    contentnomore: "没有更多数据了"
                },
                isClickChange: false,
                currentTab: 0,
                menuTabs: [{
                    name: '求购中'
                }, {
                    name: '已关闭'
                }],
                swiperDateList: [
                    {
                        hasMore: false,
                        loadingType: null,
                        data: this.data
                    },
                    {
                        hasMore: false,
                        loadingType: null,
                        data: this.data
                    }
                ],
                diffeClass: ['differ-trade-item'],
                contentClass: ['content-class'],
                bottomContentClass: ['bottom-content-class'],
                noData: false, // 判断列表是否有数据
                currentPage: 1 // 当前页数

            }
        },
        onLoad: function() {
            //初始化数据
            /*for (var i = 0; i < this.swiperDateList.length; i++) {
                this.getDateList(i);
            }*/
            this.getData(1, true);
//            this.getData(3, false);
            console.log('switchTab onLoad :' + JSON.stringify(this.swiperDateList));
        },
        onPullDownRefresh() {
            this.hasMore = false;
            this.noData = false;
            this.loadingType = 0;
            this.getData(this.currentTab, true);
        },
        methods: {
            /**
             * 初始化我的求购列表数据
             * @param status 我的求购的状态
             * @param loading 是否显示loading框
             */
            getData(status, loading) {
                let that = this;
                api.httpRequest('/wechat/user/myDemandList', {status: status}, 'POST', loading).then((res) => {
                    console.log(JSON.stringify(res));
                    if (res.code === 200) {
                        let demandData = res.result.myDemandListVos;
                        let index = res.result.status == 1 ? 0 : 1;
                        if (that.currentTab !== index) { // 不是当前页的数据，直接丢掉
                            return;
                        }
                        let listData = demandData.list;
                        if(listData.length == 0 && demandData.total == 0) {
                            that.noData = true;
                        }
                        if (listData.length > 0) {
                            that.noData = false;
                        }
                        that.currentPage = demandData.pageNum; //获取当前页
                        that.swiperDateList[index].total = demandData.total; //获取总条数，加载更多会用到
                        that.swiperDateList[index].hasMore = demandData.hasNextPage;
//                        that.swiperDateList[index].loadingType = demandData.hasNextPage || that.noData ? null : null;
                        that.swiperDateList[index].data = listData;
                        console.log('that.noData: ' + that.noData + ' that.swiperDateList[index]: ' +JSON.stringify(that.swiperDateList[index]));
                    } else {
                        that.showError(res.message);
                    }

                });
            },
            /**
             * 下拉刷新数据
             * @param e tab 的index
             **/
            refresh(e) {
                // 求购中1 已关闭3
                this.getData(e === 0 ? 1 : 3, false);
            },
            /**
             * 上拉加载更多数据
             **/
            addData(e) {
                if (this.swiperDateList[e].data.length >= this.swiperDateList[e].total) {
                    this.swiperDateList[e].loadingType = 2;
                    return;
                }
                var params = {
                    pageNum: this.data.currentPage + 1,
                    status: e === 0 ? 1 : 3
                };
                console.log('addData: params ' + JSON.stringify(params));
                api.httpRequest('/wechat/user/myDemandList', params, 'POST').then((res) => {
                    console.log(JSON.stringify(res));
                    if (res.code === 200) {
                        let demandData = res.result.myDemandListVos;
                        let index = demandData.status === 1 ? 0 : 1;
                        if (that.currentTab !== index) { // 不是当前页的数据，直接丢掉
                            return;
                        }
                        let listData = demandData.list;
                        that.swiperDateList[index].data = that.swiperDateList[index].data.contact(listData);
                        that.currentPage = demandData.pageNum; //获取当前页
                        that.swiperDateList[index].total = demandData.total; //获取总条数，加载更多会用到
                        that.swiperDateList[index].hasMore = demandData.hasNextPage;
                        that.swiperDateList[index].loadingType = demandData.hasNextPage ? null : 2;
                    } else {
                        that.showError(res.message);
                    }

                });
            },
            /**
             * 点击tab项切换的回调函数
             * @param current
             */
            swichMenu: async function(current) { //点击其中一个 menu
                if (this.currentTab == current) {
                    return false;
                } else {
                    this.currentTab = current;
                    this.setScrollLeft(current);
                    this.currentPage = 1;
                    this.noData = false;
//                    this.getData(this.currentTab === 0 ? 1 : 3, false);
                }
            },
            /**
             * 左右滑动切换tab项回调函数
             * @param e
             */
            swiperChange: async function(e) {
                let index = e.target.current;
                this.setScrollLeft(index);
                this.currentTab = index;
                this.currentPage = 1;
                this.noData = false;
                this.getData(this.currentTab === 0 ? 1 : 3, false);
            },
            setScrollLeft: async function(tabIndex) {
                let leftWidthSum = 0;
                for (var i = 0; i <= tabIndex; i++) {
                    let nowElement = await this.getWidth('tabNum' + i);
                    leftWidthSum = leftWidthSum + nowElement.width;
                }
                let winWidth = uni.getSystemInfoSync().windowWidth;
                this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
            },
            getWidth: function(id) { //得到元素的宽高
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },
            loadMore(e) {
                if (!this.swiperDateList[e].hasMore && this.data.currentPage === 1) { // 如果当前页数是第一页且没有更多数据了则禁止上拉
                    return;
                }
                console.log('loadMore  that.swiperDateList[e]: ' +JSON.stringify(this.swiperDateList[e]) + ' e: ' + e);
                this.swiperDateList[e].loadingType = 1;
                setTimeout(() => {
                    this.addData(e);
                }, 1200);
            },
            getDateList: function(tabIndex) {
                for (var i = 0; i < 10; i++) {
                    this.swiperDateList[tabIndex].data.contact(this.data);
                }
                this.swiperDateList[tabIndex].loadingType = 1;
            },
            // 点击关闭按钮
            clickClose(data, param) {
                this.$emit('closeTrade', data, param);
            }

        }
    };
</script>
<style>
    .page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        background: rgba(249, 249, 249, 1);
    }

    .body-view {
        height: calc(100% - 172upx);
        width: 100%;
    }

    .top-menu-view {
        display: flex;
        white-space: nowrap;
        width: 100%;
        background-color: #FFFFFF;
        height: 80upx;
        /* 在这里设置导航条高度 */
    }

    .top-menu-view .menu-one-view {
        display: inline-block;
        white-space: nowrap;
        height: 100%;
    }

    .top-menu-view .menu-one-view .menu-one {
        /* 在这里写 单个按钮样式 */
        margin-left: 25upx;
        margin-right: 25upx;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-txt {
        height: 40upx;
        font-size: 30upx;
        color: #1a1a1a;
        line-height: 40upx;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
        width: 100%;
        height: 4upx;
    }

    .top-menu-view .menu-one-view .menu-one-act {
        /* 在这里写 单个按钮样式 */
        margin-left: 25upx;
        margin-right: 25upx;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
        height: 40upx;
        font-size: 30upx;
        color: #077131;
        line-height: 40upx;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
        width: 99%;
        height: 4upx;
        background: #077131;
    }

    .swiper-box-list {
        flex: 1;
        width: 100%;
        /*height: calc(100% - 100upx);*/
        height: 100%;
        background-color: #f2f2f5;
    }

    .swiper-one-list {
        height: 100%;
        width: 100%;
    }

    .swiper-box-list .swiper-list-entity {
        width: 100%;
        height: 100%;
        /*text-align: center;*/
        /*display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;*/
        color: #1a1a1a;
    }
    .body-view .differ-trade-item {
        border-radius: 0 !important;
        padding: 30upx 14upx 0 !important;
    }
    .body-view .content-class {
        flex-shrink: 0;
        padding-bottom: 20upx;
    }
    .body-view .bottom-content-class {
        height: 68upx;
        line-height: 68upx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .no-result{
        background: #f5f6f7;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        overflow: hidden;
        position: fixed;

    }
    .no-result image{
        width: 200upx;
        height: 200upx;
        display: block;
        margin:0 auto;
        margin-top:32vh;
    }
</style>